<template>
  <div class="register-container">
    <form @submit.prevent="handleSubmit" class="register-form">
      <h2 class="form-title">用户注册</h2>

      <!-- 用户名输入 -->
      <div class="form-group">
        <label for="user_name">用户名</label>
        <input
          v-model="formData.user_name"
          id="user_name"
          type="text"
          :class="{ 'input-error': v$.user_name.$error }"
          @blur="v$.user_name.$touch()"
        />
        <span class="error-msg" v-if="v$.user_name.$error"> 用户名需为4-16位字符 </span>
      </div>

      <!-- 密码输入 -->
      <div class="form-group">
        <label for="password">密码</label>
        <input
          v-model="formData.password"
          id="password"
          type="password"
          :class="{ 'input-error': v$.password.$error }"
          @blur="v$.password.$touch()"
        />
        <span class="error-msg" v-if="v$.password.$error"> 密码需8-20位且包含字母和数字 </span>
      </div>

      <!-- 确认密码 -->
      <div class="form-group">
        <label for="confirmPassword">确认密码</label>
        <input
          v-model="formData.confirmPassword"
          id="confirmPassword"
          type="password"
          :class="{ 'input-error': v$.confirmPassword.$error }"
          @blur="v$.confirmPassword.$touch()"
        />
        <span class="error-msg" v-if="v$.confirmPassword.$error"> 两次密码不一致 </span>
      </div>

      <button type="submit" class="submit-btn" :disabled="isSubmitting">
        {{ isSubmitting ? '注册中...' : '立即注册' }}
      </button>
    </form>
  </div>
</template>

<script setup>
import { reactive, computed, ref } from 'vue'
import { useVuelidate } from '@vuelidate/core'
import { required, minLength, maxLength, helpers } from '@vuelidate/validators'
import { registerApi } from '../api/index.ts'
import { useRouter } from 'vue-router'

const router = useRouter()

const formData = reactive({
  user_name: '',
  password: '',
  confirmPassword: '',
})

const passwordRegex = helpers.regex(/^(?=.*[A-Za-z])(?=.*\d).{8,20}$/)

const rules = computed(() => ({
  user_name: {
    required,
    minLength: minLength(4),
    maxLength: maxLength(16),
  },
  password: {
    required,
    passwordRegex,
  },
  confirmPassword: {
    required,
    sameAs: helpers.withMessage('两次密码不一致', (value) => value === formData.password),
  },
}))

const v$ = useVuelidate(rules, formData)

const isSubmitting = ref(false)

const handleSubmit = async () => {
  const isValid = await v$.value.$validate()

  if (!isValid) return

  isSubmitting.value = true
  try {
    // 这里替换为实际API调用
    await registerApi(formData.user_name, formData.password)
    alert('注册成功！')

    router.push('/')

    // 重置表单
    Object.keys(formData).forEach((key) => (formData[key] = ''))
    v$.value.$reset()
  } catch (error) {
    alert('注册失败，请重试')
  } finally {
    isSubmitting.value = false
  }
}
</script>

<style scoped>
.register-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* padding: 20px; */
}

.register-form {
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-title {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
}

.form-group {
  margin-bottom: 0.25rem;
  min-height: 6rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #4a5568;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

input:focus {
  outline: none;
  border-color: #4299e1;
}

.input-error {
  border-color: #fc8181;
}

.error-msg {
  color: #fc8181;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: block;
}

.submit-btn {
  width: 100%;
  padding: 0.75rem;
  background-color: #4299e1;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-btn:disabled {
  background-color: #a0aec0;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .register-form {
    padding: 1.5rem;
    box-shadow: none;
  }

  .form-title {
    font-size: 1.5rem;
  }
}
</style>
